<template>
	<uni-popup ref="popupUsernotice" type="dialog">
		<view class="dialog-wrap">
			<view class="title">{{$t('user.notice')}}</view>
			<view class="cont">{{$t('noe')}}，<br />{{$t('to')}}<br /> {{$t('three')}}</view>

			<view class="tips-box">
				<!-- 协议 -->
				<view class="tips-txt">
					<uni-data-checkbox multiple :localdata="hobby" v-model="checkValue"
						@change="checkboxChange"></uni-data-checkbox>
					<view style="margin-left: -45rpx;">{{$t('agree')}}<text class="text_color"
							@click="config.path('/pagesA/agreement/agreement?type=1')">《{{$t('Disclaimers')}}》</text><text
							class="text_color"
							@click="config.path('/pagesA/agreement/agreement?type=2')">《{{$t('user.notice')}}》</text>
					</view>
				</view>
				<!-- 下次不提醒 -->
				<view class="tips-txt">
					<view>
						<uni-data-checkbox multiple :localdata="hobby1" v-model="checkValue1"
							@change="checkboxChange1"></uni-data-checkbox>
					</view>
					<view style="margin-left: -45rpx;">{{$t('Don.remind.time')}}</view>
				</view>
			</view>

			<view class="btn-box flex_a">
				<view class="btn-item flex_col" @click="close">{{$t('Cancel.care')}}</view>
				<view class="btn-item flex_col" :class="minS <= 0 ? 'active':''" @click="confirm">
					<text>{{$t('Agreed.starttakingcare')}}</text>
					<text v-if="minS > 0">({{minS}})</text>
				</view>
			</view>
		</view>
	</uni-popup>
</template>

<script>
	export default {
		name: 'popupUsernotice',
		data() {
			return {
				checked: false, // 用户是否同意协议
				hobby: [{
					value: 0
				}],
				hobby1: [{
					value: 0
				}],
				checkValue: [],
				checkValue1: [],
				minS: 3, // 3mis
				timers: null
			};
		},
		methods: {
			open() {
				let isRemind = uni.getStorageSync('isRemind');
				if (isRemind) {
					this.$emit('confirm');
					return;
				}
				this.checked = false;
				this.checkValue = []
				this.startTimers()
				this.$refs.popupUsernotice.open();
			},
			close() {
				this.$refs.popupUsernotice.close();
			},
			confirm() {
				if (this.minS > 0) {
					return;
				}
				if (!this.checked) {
					this.config.Toast(this.$t('check'));
					return;
				}
				// 如果勾选了下次不在提醒
				if (this.checked1) {
					uni.setStorageSync('isRemind', 1)
				} else {
					uni.setStorageSync('isRemind', 0)
				}
				this.$refs.popupUsernotice.close();
				this.$emit('confirm');
			},
			// 开启倒计时
			startTimers() {
				this.minS = 3;
				clearInterval(this.timers);
				this.timers = setInterval(() => {
					this.minS--;
					if (this.minS <= 0) {
						clearInterval(this.timers);
					}
				}, 1000)
			},
			checkboxChange(e) {
				let length = e.detail.value.length;
				this.checked = length ? true : false;
			},
			checkboxChange1(e) {
				let length = e.detail.value.length;
				this.checked1 = length ? true : false;
			},
		}
	}
</script>


<style lang="scss" scoped>
	.dialog-wrap {
		text-align: center;
		padding: 50rpx;
		background: #fff;
		border-radius: 20rpx;

		.title {
			color: #333333;
			font-weight: bold;
			font-size: 36rpx;
		}

		.cont {
			line-height: 51rpx;
			margin: 60rpx 0;
			font-size: 32rpx;
		}

		.tips-box {
			margin-bottom: 22rpx;

			.tips-txt {
				font-size: 26rpx !important;
				color: #999999;
				display: flex;
				align-items: center;

				.text_color {
					color: $uni-theme-color;
				}
			}
		}

		.btn-box {
			.btn-item {
				display: flex;
				flex-direction: row;
				align-items: center;
				width: 260rpx;
				height: 80rpx;
				background: #E4E4E4;
				border-radius: 15rpx;
				text-align: center;
				font-size: 26rpx;
			}

			.active {
				background: #AF9453;
				color: #fff;
				margin-left: 20rpx;
			}
		}
	}
</style>